<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>推荐页面</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  
   <link href="../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
   <link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">
   <link href="../css/personal.css" rel="stylesheet" type="text/css">
   
   <script type="text/javascript" src="../js/vue2.5.js" ></script>
	<script type="text/javascript" src="../js/axios.min.js" ></script>
	<script type="text/javascript" src="../js/jquery-1.11.2.min.js" ></script>
	<script type="text/javascript" src="../js/global.js" ></script>
	<script type="text/javascript" src="../js/bootstrap/js/bootstrap.js" ></script>
	<script type="text/javascript" src="../js/layer/layer.js" ></script>
	<script src="../js/param.js"></script>
   
   
</head>
<body>
		
            <div class="nav-table">
					   <div class="long-title"><span class="all-goods">全部分类</span></div>
					   <div class="nav-cont">
						<ul>
							<li class="index"><a href="../index.html">首页</a></li>
							<li class="qc"><a href="text.html">推荐</a></li>
							<li class="qc"><a href="../home/search.html">搜索</a></li>
							<li class="qc"><a href="#">团购</a></li>
							<li class="qc last"><a href="about.html">我们</a></li>
						</ul>

						   
						</div>
			</div>
			<b class="line"></b>	
<!--文章 -->
<div class="am-g am-g-fixed blog-g-fixed bloglist container">
  <div class="am-u-md-9">
    <article class="blog-main" v-for="(recommend,index) in recommendData">
      <h3 class="am-article-title blog-title">
        <a href="#">{{recommend.title}}</a>
      </h3>
      <h4 class="am-article-meta blog-meta"> {{recommend.date}}</h4>

      <div class="am-g blog-content">
        <div class="am-u-sm-12">
          <p>{{recommend.p1}}</p>
          
          <strong class="blog-tit"><p>{{recommend.autor}}<span>丨</span>水果功效</p></strong>
          <div class="Row">
          	<li><img :src="baseUrl+'/recommend/getpic1?rid='+ recommend.rid"/></li>
          	<li><img :src="baseUrl+'/recommend/getpic2?rid='+ recommend.rid"/></li>
          	<li><img :src="baseUrl+'/recommend/getpic3?rid='+ recommend.rid"/></li>
          </div>
          <p>{{recommend.p2}}</p>
          

          <p>{{recommend.p3}}</p>
          
          
        </div>
  
      </div>

    </article>


    <hr class="am-article-divider blog-hr">
    <ul class="am-pagination blog-pagination">
      <li class="am-pagination-prev"><a href="javascript:;" @click="query(pager.pageNum-1)">&laquo; 上一篇</a></li>
      <li class="am-pagination-next"><a href="javascript:;"  @click="query(pager.pageNum+1)">下一篇 &raquo;</a></li>
    </ul>
  </div>

  <div class="am-u-md-3 blog-sidebar">
    <div class="am-panel-group">

      

    </div>
  </div>

</div>

<div class="footer" >
 <div class="footer-hd">
 <p>

 <b>|</b>
 <a href="#">商城首页</a>
 <b>|</b>
 <a href="#">支付宝</a>
 <b>|</b>
 <a href="#">物流</a>
 </p>
 </div>
 <div class="footer-bd">
 <p>

 <a href="#">合作伙伴</a>
 <a href="#">联系我们</a>
 <a href="#">网站地图</a>
 <em>© 2015-2025  版权所有. 更多模板 <a href="http://www.cssmoban.com/" target="_blank" title=""></a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></em>
 </p>
 </div>
</div>
<script>
var vue = new Vue({
	el: '.container',
		data: {
			
			baseUrl:baseUrl,
			recommendData:[],//推荐数据
			pager:{},
			pageBtns: []//分页按钮数组
		},
		methods: {
			query: function(pageNum) {
				axios.get(baseUrl + '/recommend/query', {
						params: {
							pageNum: pageNum,
							pageSize: 1
						}
					})
					.then(function(response) {
						this.recommendData = response.data.list;
						//响应的分页数据复制给数据模型
						this.pager = response.data.pager;
						//生成分页页码按钮
						

						

					}.bind(this))
					.catch(function(error) {
						layer.msg('获得数据失败');
					});
					
				
			},
			
		},mounted: function() {
			this.query(1);
		}
	})
</script>


<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="{{assets}}js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="../AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="../AmazeUI-2.4.2/assets/js/amazeui.min.js"></script>

</body>
</html>
